<template>
  <view class="nav">
    <view :style = "'height:' + statusHeight + 'rpx;' + containerStyle" >
    </view>
    <!-- 页面头的搜索框
    -->
<!--    <view v-if="isHome" class="headNav" :style="'height:' + navHeight + 'rpx;line-height:' + navHeight +'rpx;padding-left:20rpx;'">-->
<!--      <text>中部地区</text>-->
<!--    <view style="display: flex;align-items: center; margin-left: 120rpx; width: 40%">-->
<!--      <uni-easyinput :styles="styles" prefixIcon="search" v-model="hosptionalName" placeholder="搜医院" @iconClick="iconClick"></uni-easyinput>-->
<!--    </view>-->
<!--    <view style="display: flex;align-items: center; margin-left: 120rpx;  width: 40%">-->
<!--    <uni-easyinput :styles="styles" prefixIcon="search" v-model="hosptionalName" placeholder="搜医院" @iconClick="iconClick"></uni-easyinput>-->
<!--    </view>-->
    <view style="flex: 1">
<!--   uniapp 跳转的标签   -->
      <navigator
          url="../../pages/mystu/search/index"
          :style="
						'height:' +
						menu.height*2 +
						'rpx;line-height:' +
						menu.height*2 +
						'rpx;margin-top:' +
						(menu.top*2 - statusHeight) +
						'rpx;margin-left:32rpx;margin-right:' +
						(menu.width*2 + 24) +
						'rpx;background: #f4f4f4;border-radius:200rpx;text-align:center'
					"
      >
        <text class="search-text">找医院</text>
      </navigator>
    </view>
    <view class="navbar" :style="'height:' + navHeight + 'rpx;line-height:' + navHeight +'rpx;padding-left:20rpx;'">
      <view class="back-icon" @click = "backOrHome">
        <image v-if="pages > 1" src="@/static/navbar/ic_back.png">
        </image>
        <image v-else src="@/static/navbar/ic_home.png"></image>
      </view>
  </view>
    </view>

</template>


<script setup>
//onBeforeMount 加载页面之前调用该函数
import { ref,onBeforeMount,reactive } from 'vue'

import { onLoad } from '@dcloudio/uni-app';

onBeforeMount(() =>{
  console.log("onBeforeMount")
  // 在页面加载时调用 setNavSize 函数
  setNavSize();
  setStyle();
});

//获取状态栏高度
//创建响应式数据 实际开发中需要关注 value 就可以了
const statusHeight = ref(0);

// 背景颜色
const containerStyle = ref('')

//内容高度
const navHeight = ref(0);

//字体样式
const textStyle = ref('');

//图标样式
const iconStyle = ref('');

const hosptionalName = ref('');

const styles = ref({
  borderRadius: '40rpx',
  padding: '10rpx 20rpx',
  height: '10rpx',
  width: '10rpx'
});

//页面站数量
const pages = ref(getCurrentPages().length);

// 获取到胶囊的位置
const menu = reactive(uni.getMenuButtonBoundingClientRect())

onLoad(() => {
 console.log("onLoad")
})
//获取状态栏高度
const  setNavSize = (() =>{
  //取两个参数
  const {system,statusBarHeight}  = uni.getSystemInfoSync();
  //statusBarHeight * 2 转换成 rpx单位
  statusHeight.value = statusBarHeight * 2;
  if(system.indexOf('iOS') > -1) {
    navHeight.value = 88
  } else {
    navHeight.value = 96
  }
});


const  iconClick = (() =>{
 uni.showToast({
   title: '点击了搜索按钮' + hosptionalName.value,
   icon: 'none'
 })
})

const  backOrHome = (() =>{
  if(pages.value > 1) {
    uni.navigateBack({
      delta: 1
    })
  } else {
    uni.switchTab({
      url: '/pages/index'
    })
  }
});

//样式设置
const setStyle = (() =>{
  //字体样式
  containerStyle.value = ['background:' + props.background].join(";")
  textStyle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(';')
  iconStyle.value = ['width:' + props.iconWidth + 'rpx', 'height:' + props.iconHeight + 'rpx'].join(';')

})

//样式设置（控制组件的字体，颜色等等,便于外部传参，动态设置）
const  props = defineProps({
  background: {
    type: String,
    default: 'rgb(255,255,255)'
  },
  color: {
    type: String,
    default: 'rgb(255,255,255)'
  },
  fontSize: {
    type: String,
    default: '32'
  },
  iconWidth: {
    type: String,
    default: '116'
  },
  iconHeight: {
    type: String,
    default: '38'
  },
  titleText: {
    type: String,
    default: ''
  },
  isHome: {
    type: Boolean,
    default: true
  },




});






</script>

<style scoped lang="scss">
/* position: fixed;
将导航栏设置为固定定位，这意味着导航栏会始终固定在浏览器窗口的指定位置，即使页面滚动，导航栏也不会移动。

width: 100%;
设置导航栏的宽度为100%，即导航栏会占据整个浏览器窗口的宽度。

top: 0;
将导航栏固定在浏览器窗口的顶部，距离顶部边缘为0。

left: 0;
将导航栏固定在浏览器窗口的左侧，距离左侧边缘为0。

z-index: 2;
设置导航栏的堆叠顺序为2。z-index属性用于控制元素的层级关系，数值越大，元素越靠前显示。这里设置为2，确保导航栏位于其他z-index值小于2的元素之上。


如果你需要定位元素（如固定在某个位置或相对于某个元素偏移），使用 left。

如果你需要调整元素之间的间距，使用 margin-left。
*/
  .nav {
    position: fixed;  //固定定位
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
  }

.navbar {
  position: relative;
}


/*如果你需要精确控制元素的位置（如悬浮、固定、相对偏移等），使用 position。

如果你需要控制元素的布局方式（如块级、行内、弹性布局、网格布局等），使用 display。

两者可以结合使用，但需要根据具体需求选择合适的属性。例如，你可以使用 position: absolute 来定位一个元素，同时使用 display: flex 来控制其内部子元素的布局。*/
.back-icon{
  display: flex;
  align-items: center;
  width: 64rpx;
  height: 100%;
}
.back-icon image{
  width:64rpx;
  height: 64rpx;
  margin-left: 20rpx;
}

.headNav{
  /*仅仅设置 display: flex; 会让 .headNav 变成一个Flex容器，子元素会水平排列，并且默认不换行。*/
  display: flex;
}

.navSearch{
  width: 50%;
  height: 1rpx;
  margin-top: 120rpx;

}

.search-text {
  display: inline-block;
  padding-left: 30rpx;
  color: #bbbbbb;
  font-size: 26rpx;
  background: url()
  no-repeat left center;
  background-size: 23rpx;
}

</style>